<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
		<title>汀汀新能源福彩兑奖</title>
		<link rel="stylesheet" href="__ADDONSTATIC__/home/css/mui.min.css" />
<!--		<link rel="icon" href="__ADDONSTATIC__/home/img/bitbug_favicon.ico" type="image/gif">-->
		<link rel="stylesheet" href="__ADDONSTATIC__/home/css/standard.css" />
<!--		{:hook('Jssdk')}-->
	</head>
	<style type="text/css">
		* {
		    margin: 0;
		    padding: 0;
		}
		body,html{
		    background-color: #fff;
			/* height: 100%; */
			width: 100%;
		}
		.top{
			height: 3.0rem;
			width: 100%;
			background-color: rgb(136, 191, 56);
		}
		.serach{
			width: 100%;
			height: 3.0rem;
			line-height: 3.0rem;
			color: #FFFFFF;
		}
		.cter{
			align-items: center;
		}
		.width33{
			width: 33%;
			text-align: center;
		}
		.jieguo{
			font-size: 0.8rem;
		}
		.p_input{
			background-color: #F5F5F5;
			width: 94%;
			height: 3rem;
			line-height: 2.5rem;
			text-align: left;
			outline: none;
			padding-left: 1rem;
			border: 0;
			border-radius: 0.5rem;
		}
		.upfile_v{
			/* background-color: #F5F5F5; */
		}
		.but_v{
			position: fixed;
			bottom: 2rem;
			background-color: rgb(136, 191, 56);
			color: #FFFFFF;
			width: 50%;
			margin-left: 25%;
			height: 2.5rem;
			line-height: 2.5rem;
			text-align: center;
			border-radius: 0.5rem;
		}

		#clipArea {
			height: 10rem;
		}
		#file{
			margin: 1.5rem;
		}
		.select-v{width: 100%;padding: 5px 0;}
		#clipBtn {
			padding: 5px 10px;
			margin-left: 2em;
		}
		#view {
			margin: 0.5rem auto;
			width: 300px;
			height:100px;
			background-color: #666;
		}

	</style>
	
	<body>
		
		<div class="top">
			<div class="serach flex_r_a cter">
				<div class="width33 jieguo">
					<div style="width: 92%;margin-left: 4%;text-align: left;" onclick="gohelp()">帮助</div>
				</div>
				<div class="width33">图片上传</div>
				<div class="width33 jieguo">
					<div style="width: 92%;margin-right: 4%;text-align: right;" onclick="goList()">查询结果</div>
				</div>
			</div>
		</div>
		
		<div style="margin-top: 1.5rem;width: 94%;margin-left: 4.5%;">
			<input class="p_input" type="text" value="{$relname}" id="realname" placeholder="请输入真实姓名"/>
			<input class="p_input" style="margin-top: 1.5rem;" value="{$mobile}" type="number" id="phone" placeholder="请输入手机号"/>
		</div>
		<div style="margin-top: 1rem;" id="clipArea"></div>
		<input type="file" id="file">
		<div id="view"></div>
		<div class="select-v">
			<button id="clipBtn">截取</button>
		</div>
		
		<div class="but_v"  onclick="commit()">提交</div>
	</body>
	<script src="__ADDONSTATIC__/home/js/hammer.min.js"></script>
	<script src="__ADDONSTATIC__/home/js/iscroll-zoom-min.js"></script>
	<script src="__ADDONSTATIC__/home/js/lrz.all.bundle.js"></script>
	<script src="__ADDONSTATIC__/home/js/PhotoClip.js"></script>
	<script src="__ADDONSTATIC__/home/js/jquery.js"></script>
	<script type="text/javascript" src="__ADDONSTATIC__/home/js/mui.min.js"></script>
	<script type="text/javascript">
		var imgUrl = ''
		//图片特征码
		var imgLenCode = 0
		var pc = new PhotoClip('#clipArea', {
			size: [300, 100],
			outputSize: 640,
			adaptive: ['90%', '60%'],
			file: '#file',
			view: '#view',
			ok: '#clipBtn',
			//img: 'img/mm.jpg',
			loadStart: function() {
				console.log('开始读取照片');
			},
			loadComplete: function() {
				console.log('照片读取完成');
			},
			done: async dataURL => {
				var imgArr = []
				var bytes = window.atob(dataURL.split(',')[1]);
				for(var i = 0; i < bytes.length; i++){
					imgArr.push(bytes.charCodeAt(i));
				}
				if(imgLenCode === imgArr.length){
					mui.alert('图片未发生变化','提示')
					return
				}
				imgLenCode = imgArr.length
				try{
					imgUrl = await uploadImg(imgArr)
				}catch (err){
					mui.alert('服务器异常，请稍后再试','提示')
				}
			},
			fail: function(msg) {
				mui.alert(msg,'提示')
			}
		});
		// 选择图片显示
		function uploadImg(imgArr) {
			return new Promise(((resolve, reject) => {
				//上传图片
				let formData = new FormData()
				var blob = new Blob([new Uint8Array(imgArr)], {type: 'image/jpeg'});
				formData.append('image',blob, Date.now() + '.jpg');
				mui.showLoading("修剪图片..","div");
				$.ajax({
					type: 'post',
					contentType: false,
					dataType: 'json',
					url:"{$uploadUrl}",
					data:formData,
					processData: false,
					success: function (result) {
						mui.hideLoading()
						let r = JSON.parse(result)
						if(r.code === 0) {
							let src = r.data.src
							resolve(src)
						}
					},
					error: err => {
						reject(err)
					}
				})
			}))
		}

		function gohelp(){
			window.location="{:urlAddons('caipiao/Home/help')}";
		}
		
		function goList(){
			window.location="{:urlAddons('caipiao/Home/pagelist')}";
		}
		
		/**
		 * 提交
		  * */
		function commit(){
			var realname =$("#realname").val();
			var phone =	$("#phone").val();
			if(imgUrl === ''){
				mui.toast('请按要求截图',{ duration:'long', type:'div'})
				return
			}
			let pram = {
				relname:realname,
				mobile:phone,
				img_url:imgUrl
			}
			$.ajax({
			    type: 'post',
			    header: 'Access-Control-Allow-Origin:*',
			    url: "{:urlAddons('caipiao/Home/index')}",
			    data: JSON.stringify(pram),
				contentType: 'application/json',
			    dataType: 'json',
			    success: res => {
			    	if(res.code === 0) {
						mui.toast(res.msg,{ duration:'long', type:'div'})
						window.location.href = "{:urlAddons('caipiao/Home/pagelist')}"
					}else{
						mui.toast(res.msg,{ duration:'long', type:'div'})
					}
				},
			    error: function () {
					mui.alert('服务器异常','提示')
			    }
			});
		}

		/*wx.ready(function () {
			var shareData = {
				title: '体育彩票兑奖',
				desc: '请拍照上传体育彩票兑奖条码',
				link: "{:getHostDomain()}{:addonUrl('caipiao/Home/index')}",
				imgUrl: '{:getHostDomain()}__ADDONSTATIC__/images/cp.png'
			};
			wx.onMenuShareAppMessage(shareData);
			wx.onMenuShareTimeline(shareData);
			wx.hideAllNonBaseMenuItem({
				success: function () {
				}
			});
			wx.showMenuItems({
				menuList: [
					'menuItem:share:timeline', // 分享到朋友圈
					'menuItem:share:appMessage',
				]
			});
		});*/
	</script>
</html>
